<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>球球</title>
</head>
<div align="center" style="font-size: 20px;font-family: 微软雅黑;font-weight: bold">

    上传文件 ：<input type="file" id="avatar" name="avatar">
    <button id="upbutton">上传</button>
</div>
<br/>
<div align="center" style="font-size: 20px;font-family: 微软雅黑;font-weight: bold">
    生成图片 ：<button id="makepic">点击生成深度图</button>
</div>
<div align="center" style="font-size: 20px;font-family: 微软雅黑;font-weight: bold">
    显示图片 ：<button id="showpic">点击显示深度图</button>
</div>
<img id="pic" src="" />
<script src="js/jquery.min.js"></script>
<script>
    $('#upbutton').click(function(){
        var files = $('#avatar').prop('files');
        var data = new FormData();
        data.append('avatar', files[0]);
        $.ajax({
            url: '/upload2',
            type: 'POST',
            data: data,
            cache: false,
            processData: false,
            contentType: false,
            success:function () {
                alert("上传成功!")
            }
        });
    });
    $('#makepic').click(function(){
        alert("正在生成图片中，请稍后。");
        var files = $('#avatar').prop('files');
        $.ajax({
            url: '/makepic?name='+files[0].name,
            type: 'Get',
            cache: false,
            processData: false,
            contentType: false,
            success:function () {
                alert("生成成功!")
            }
        });
    });

    $('#showpic').click(function(){
        var files = $('#avatar').prop('files');
        $.ajax({
            url: '/showpic?name='+files[0].name,
            type: 'Get',
            cache: false,
            processData: false,
            contentType: false,
            success:function (data) {
                document.getElementById('pic').src=data;
            }
        });
    });
</script>

</body>

</html>


